<template>
  <div class="rightHead">
    <img src="@/assets/file/myFiles.png" alt="">
    <span>我的文档（共{{ fileCount }}个）</span>
    <div class="btn-blue btnLocal" @click="uploadLocal">本地上传</div>
    <minDialogBox v-if="ifShowDialog" :dialogData="dialogData" @backBtnEvent="backEvent"
                  @cancelBtnEvent="cancelEvent"></minDialogBox>
  </div>
</template>

<script>
import { cancel } from '@/api/file'

export default {
  name: 'rightHead',
  data () {
    return {
      uploadFile: null
    }
  },
  computed: {
    // 文件数量
    fileCount () {
      return this.$store.state.filePage.total
    },
    // 是否展示弹框
    ifShowDialog () {
      return this.$store.state.filePage.ifShowDialog
    },
    // 弹框内容
    dialogData () {
      return this.$store.state.filePage.dialogData
    }
  },
  methods: {
    // 点击本地上传
    async uploadLocal () {
      await this.tools.createInputFile(true).then(res => {
        if (res && res.data && res.data.code === 200) {
          this.uploadFile = res.data.data
        }
      })
      if (this.uploadFile.length) {
        this.uploadFile.forEach(item => {
          this.$store.dispatch('filePage/addFiles', item.file_id).then(res => {
            if (res.data && res.data.code === 200) {
              this.$store.commit('filePage/set_dialogData', {
                mainTips: [
                  '上传成功'
                ],
                subTips: '',
                btnList: [
                  {
                    name: '知道了',
                    color: 'blue',
                    type: 'back'
                  }
                ],
                imgSrc: require('@/assets/status/success.png'),
                ifShowPercents: false
              })
              this.$store.dispatch('filePage/getFileList')
            }
          })
        })
      }
      this.$emit('refresh')
    },
    // 返回上一层/成功
    backEvent () {
      this.$store.commit('filePage/set_ifShowDialog', false)
      this.$store.commit('filePage/set_dialogData', {})
    },
    // 取消上传
    cancelEvent () {
      cancel()
      this.$store.commit('filePage/set_ifShowDialog', false)
      this.$store.commit('filePage/set_dialogData', {})
    }
  }
}
</script>

<style scoped lang="scss">
.rightHead {
  width: 100%;
  height: 72px;
  border-bottom: 1px solid #DEE3EC;
  padding: 16px 20px;
  position: relative;
  img {
    width: 40px;
    height: 40px;
    vertical-align: middle;
    margin-right: 12px;
  }
  span {
    vertical-align: middle;
    font-size: 14px;
  }
  .btnLocal {
    width: 96px;
    height: 36px;
    line-height: 36px;
    margin-left: 0;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
